<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue demo 11 组件模板</title>
</head>
<body>
<div id="box">
    <my-aaa></my-aaa>
</div>
<template id="aaa">
    <div>
        <h1>第{{groupID}}组小组成员</h1>
        <ul>
            <li v-for="val in students">
                {{className}}······{{val.stuNum}}······{{val.stuName}}
            </li>
        </ul>
    </div>
</template>

</body>
<script>
    var vm = new Vue({
        el: "#box",
        data: {},
        components: {
            "my-aaa": {
                data() {
                    return {
                        msg: '组件遍历',
                        className: "计算机科学与技术",
                        groupID: "3",
                        students: [
                            {
                                stuNum: "2017112302",
                                stuName: "刘宗顺"
                            },
                            {
                                stuNum: "2017112320",
                                stuName: "代云水"
                            },
                            {
                                stuNum: "2017112106",
                                stuName: "丁皞哲"
                            },
                            {
                                stuNum: "2017112327",
                                stuName: "阿依加马丽·艾乃吐力"
                            },
                            {
                                stuNum: "2017112101",
                                stuName: "袁碧茹"
                            },
                            {
                                stuNum: "2017112317",
                                stuName: "陈疏桐"
                            },
                        ],
                    }
                },
                methods: {
                    change() {
                        this.msg = "changed";
                    }
                },
                template: '#aaa',
            }
        }
    });
</script>
</html>